<template>
    <el-drawer
        v-model="drawerShow"
        direction="ltr"
        close-on-click-modal
        close-on-press-escape
        :show-close="false"
        :withHeader="false"
        :size="drawerSize"
    >
        <div class="time-line-wrap" v-show="showTimeLine">
            <el-row justify="center" align="middle" class="more-date" @click="moreDate('late')">更晚的时间</el-row>
            <div class="time-line" ref="lineRef">
                <el-row class="line"></el-row>
                <div class="scale-wrap" ref="scaleRef">
                    <div v-for="(v, k) in dateData" :key="k">
                        <el-row class="scale-row" v-if="v.format('DD') != '01'" justify="space-between" align="middle">
                            <div class="scale"></div>
                            <span :class="aciveDate?.isSame(v) ? 'date-active' : 'date'" @click="clickDate(v)">
                                {{ v.format('MM-DD') }}
                            </span>
                        </el-row>
                        <!-- 显示月份和年份 -->
                        <div v-else>
                            <el-row class="scale-row" justify="space-between" align="middle">
                                <div class="scale"></div>
                                <span :class="aciveDate?.isSame(v) ? 'date-active' : 'date'" @click="clickDate(v)">
                                    {{ v.format('MM-DD') }}
                                </span>
                            </el-row>
                            <el-row class="scale-row" justify="space-between" align="middle">
                                <div class="scale-month">
                                    <div class="scale-white"></div>
                                </div>
                                <div class="month-year" @click="setShowTimeLine">
                                    <span class="month-num">{{ getMonth(v) }}</span>
                                    <span class="text">-{{ v.format('YYYY') }}</span>
                                </div>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
            <el-row justify="center" align="middle" class="more-date" @click="moreDate('early')">更早的时间</el-row>
        </div>
        <Calendar @setShowTimeLine="setShowTimeLine" @setSelectDate="setSelectDate" />
    </el-drawer>
</template>

<script setup>
    import { reactive, onMounted, watch, ref, nextTick, defineExpose } from 'vue'
    import dayjs from 'dayjs'
    import Calendar from './calendar.vue'

    let drawerShow = ref(false)
    let drawerSize = ref('250px')
    let dateData = ref([])
    let scaleRef = ref(null)
    let lineRef = ref(null)
    let aciveDate = ref(null)
    let showTimeLine = ref(true)
    let selectDate = dayjs(new Date())

    watch(drawerShow, (nval) => {
        nextTick(() => {
            if (nval) {
                console.log(scaleRef.value.clientHeight)
                lineRef.value.style.height = scaleRef.value.clientHeight + 'px'
            }
        })
    })

    onMounted(() => {
        generateData()
    })

    function getMonth(v) {
        return v.subtract(1, 'month').format('MM')
    }

    function generateData() {
        dateData.value = []
        const lastYear = selectDate.subtract(1, 'year')
        let temp = selectDate
        while (!temp.isSame(lastYear)) {
            dateData.value.push(temp)
            temp = temp.subtract(1, 'day')
        }
    }

    function clickDate(v) {
        aciveDate.value = v
    }

    function setShowTimeLine() {
        showTimeLine.value = !showTimeLine.value
        drawerSize.value = showTimeLine.value ? '250px' : '500px'
    }

    function moreDate(action) {
        if (action === 'late') {
            if (selectDate.add(1, 'year').isSameOrBefore(dayjs(new Date()))) {
                selectDate = selectDate.add(1, 'year')
            }
        } else {
            selectDate = selectDate.subtract(1, 'year')
        }
        generateData()
    }

    function setDrawerShow(v = false) {
        drawerShow.value = v
    }

    function setSelectDate(v) {
        selectDate = v
        generateData()
    }

    defineExpose({
        setDrawerShow,
    })
</script>

<style lang="less" scoped>
    @import url('@/common.less');
    .time-line-wrap {
        height: 100vh;
        overflow-y: scroll;
        user-select: none;
        cursor: pointer;
        .time-line {
            display: flex;
            .line {
                width: 7px;
                height: 100%;
                background: #66b1ff;
                // border-radius: 5px;
            }
            .scale-wrap {
                position: relative;
                .scale-row {
                    padding: 8px 0px;
                    // width: 105px;
                    .scale {
                        width: 14px;
                        height: 14px;
                        background: #409eff;
                        border-radius: 50%;
                        left: -12px;
                        position: relative;
                        border: 2px solid white;
                    }
                    .scale-month {
                        width: 24px;
                        height: 24px;
                        background: #409eff;
                        border-radius: 50%;
                        left: -19px;
                        position: relative;
                        border: 2px solid white;
                        .scale-white {
                            width: 12px;
                            height: 12px;
                            background: #d9ecff;
                            border-radius: 50%;
                            left: 6px;
                            top: 6px;
                            position: relative;
                            z-index: 2;
                        }
                    }
                    .date {
                        font-size: 25px;
                        font-weight: lighter;
                    }
                    .date-active {
                        color: #409eff;
                        font-size: 25px;
                        font-weight: lighter;
                    }
                }
                .month-year {
                    .month-num {
                        font-size: 40px;
                    }
                    .text {
                        font-size: 25px;
                        font-weight: lighter;
                    }
                }
            }
        }
        .more-date {
            height: 40px;
            color: #409eff;
            border: 1px solid @border-color;
        }
    }
</style>
